<template>
  <div class="backgroundDiv">
    <div
      style="
        height: 250px;
        width: 250px;
        border-radius: 50%;
        background-color: #53e2bc;
        position: absolute;
        top: 50px;
        left: 150px;
      "
    ></div>
    <div
      style="
        height: 150px;
        width: 150px;
        border-radius: 50%;
        background-color: #fff676;
        position: absolute;
        top: 900px;
        left: 950px;
      "
    ></div>
    <div
      style="
        height: 150px;
        width: 150px;
        background-color: #4ddbff;
        position: absolute;
        top: 600px;
        left: 1650px;
      "
    ></div>
  </div>
  <div class="loginBox">
    <div class="left"></div>
    <div class="right">
      <img
        :src="userIcon"
        alt=""
        style="height: 40px; position: absolute; left: 330px; top: -350px"
      />
      <input
        type="text"
        class="inputBox"
        style="left: 380px; top: -350px"
        placeholder="请输入账号"
        v-model="loginName"
      />
      <img
        :src="passwordIcon"
        alt=""
        style="height: 40px; position: absolute; left: 330px; top: -250px"
      />
      <input
        type="text"
        class="inputBox"
        style="left: 380px; top: -250px"
        placeholder="请输入密码"
        v-model="loginPwd"
      />
    </div>
    <button
      class="circle"
      overflow:hidden
      @click="loginEvent()"
      style="left: 380px; top: -200px"
    >
      登录
    </button>
  </div>
</template>
<script setup>
import passwordIcon from '@/assets/icons/password.svg'
import userIcon from '@/assets/icons/user.svg'
import { useRouter } from 'vue-router'
import { apiAdminLogin } from '@/api/admin.js'
import { ref } from 'vue'
const router = useRouter()
const loginName = ref('')
const loginPwd = ref('')
const loginEvent = async () => {
  const res = await apiAdminLogin({
    loginName: loginName.value,
    loginPwd: loginPwd.value
  })
  // 模拟登陆
  if (res.data.code === 200) {
    ElMessage.success('登陆成功')
    var token = res.headers['jwttoken']
    sessionStorage.setItem('token', token)
    console.log(token)
    router.push({
      path: '/admireHome',
      query: {
        checkNum: check(res.data.data.pmses)
      }
    })
  } else if (res.data.code === 401) {
    ElMessage.error('用户不存在')
  } else if (res.data.code === 402) {
    ElMessage.error('密码错误')
  } else {
    ElMessage.error('密码错误')
  }
}
// 权限校验
const check = list => {
  // flag位四位数，从高位到低位分别为新增权限，封禁用户，封禁评论,封禁微博
  let flag = 0
  for (let i = 0; i < list.length; i++) {
    if (list[i] === '审核微博') {
      flag += 1
    } else if (list[i] === '审核评论') {
      flag += 10
    } else if (list[i] === '封停用户') {
      flag += 100
    } else if (list[i] === '新增管理员') {
      flag += 1000
    }
  }
  return flag
}
</script>
<script>
import axios from '../plugins/axios'
import qs from 'qs'
import { reactive, toRefs } from 'vue'
export default {
  setup () {
    const state = reactive({
      username: '',
      password: ''
    })
    function login () {
      axios
        .post(
          'http://localhost:9050/xw01/xw-admin/api/admin/login',
          qs.stringify({
            username: state.username,
            password: state.password
          })
        )
        .then(res => {
          console.log(res)
          var token = res.headers['jwttoken']
          sessionStorage.setItem('token', token)
          alert('登录成功', token)
        })
    }
    return {
      ...toRefs(state),
      login
    }
  }
}
</script>
<style scoped lang="scss">
.circle {
  background-color: rgb(0, 110, 255);
  color: #fff;
  position: relative;
  z-index: 1;
  overflow: hidden;
  width: 300px;
  height: 50px;
  margin-top: 50px;
  font-size: 20px;
  font-weight: 500;
  border: 1px solid rgb(0, 110, 255);
  border-radius: 20px;
  box-shadow: 0 0 20px rgb(0, 110, 255);
}

.circle::before {
  content: '';
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 50%;
  width: 3rem;
  height: 2rem;
  transform: translate3d(-50%, -50%, 0) scale(0, 0);
  border-radius: 50%;
  background-color: rgba(0, 0, 255, 0.267);
  transform-origin: center;
  transition: ease-in-out 0.6s;
}

.circle:hover::before {
  transform: translate3d(-50%, -50%, 0) scale(15, 15);
}
.circle:active {
  font-size: 18px;
  border: none;
  box-shadow: 0 0 5px rgb(0, 110, 255);
}
.inputBox {
  width: 300px;
  height: 50px;
  background-color: #ffffff;
  box-shadow: inset 2px -2px 2px #d6d6d6;
  position: absolute;
  border: none;
  border-bottom: 1px solid #a1a0a0;
  font-size: 25px;
  padding-left: 20px;
}
.inputBox:focus {
  border-bottom: 1px solid #008cff;
  outline: none;
  box-shadow: -1px 2px 1px #008cff6b;
}
.right {
  position: relative;
}
.left {
  background-color: #fff;
  height: 100%;
  width: 40%;
}
.loginBox {
  height: 400px;
  width: 800px;
  position: absolute;
  left: 350px;
  top: 200px;
  background-color: #fff;
  box-shadow: 0 0 10px #a1a0a0;
}
html,
body {
  height: 100%;
  width: 100%;
}
.backgroundDiv {
  position: absolute;
  height: 100%;
  width: 100%;
  overflow: hidden;
}
* {
  margin: 0;
  padding: 0;
}
</style>
